<template>
  <view class="store-page">
    <!-- 顶部栏：标签按钮 + 搜索框 -->
    <view class="top-bar">
      <button class="store-tag">我的店铺</button>
      <view class="search-box">
        <input 
          type="text" 
          placeholder="Search..." 
          v-model="searchKey" 
          @input="filterGoods" 
        />
        <image src="/static/stores/search.png" class="search-icon" mode="aspectFit" />
      </view>
    </view>

    <!-- 功能按钮：出售中、拍卖中、价格筛选、管理（水平排列） -->
    <view class="func-buttons">
      <button 
        class="func-btn sell-btn" 
        :class="{ active: currentTab === 'sell' }" 
        @click="switchTab('sell')"
      >出售中</button>
      <button 
        class="func-btn auction-btn" 
        :class="{ active: currentTab === 'auction' }" 
        @click="switchTab('auction')"
      >拍卖中</button>
      <button class="func-btn filter-btn" @click="openFilter">
        <image src="/static/stores/filter.png" class="filter-icon" mode="aspectFit" />
        <text>价格筛选</text>
      </button>
      <button class="func-btn manage-btn">管理</button>
    </view>

    <!-- 价格筛选条件显示 -->
    <view class="filter-condition" v-if="priceFilter">
      <text>价格范围: 0 - {{ priceFilter }}元</text>
      <button class="clear-filter" @click="clearFilter">清除</button>
    </view>

    <!-- 商品列表：两行两列，价格标签底部显示 -->
    <view class="goods-list">
      <view 
        class="goods-item" 
        v-for="(item, idx) in displayedGoods" 
        :key="idx"
        @click="navigateToDetail(item)"
      >
        <image :src="item.image" class="goods-img" mode="aspectFill" />
        <view class="price-tag">{{ item.price }}￥</view>
        <view class="status-tag" :class="item.status === 'sell' ? 'sell-tag' : 'auction-tag'">
          {{ item.status === 'sell' ? '出售中' : '拍卖中' }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'sell',         // 当前选中的标签页：'sell' 或 'auction'
      searchKey: '',              // 搜索关键词
      priceFilter: null,          // 价格筛选上限
      allGoods: {                 // 所有商品数据，按状态分组
        sell: [                   // 出售中的商品
          { id: 1, image: '/static/stores/goods1.jpg', price: 8999, status: 'sell' },
          { id: 2, image: '/static/stores/goods2.jpg', price: 12999, status: 'sell' },
          { id: 3, image: '/static/stores/goods3.jpg', price: 15999, status: 'sell' },
          { id: 4, image: '/static/stores/goods4.jpg', price: 9999, status: 'sell' },
        ],
        auction: [                // 拍卖中的商品
          { id: 5, image: '/static/stores/goods5.jpg', price: 22999, status: 'auction' },
          { id: 6, image: '/static/stores/goods6.jpg', price: 18999, status: 'auction' },
          { id: 7, image: '/static/stores/goods7.jpg', price: 32999, status: 'auction' },
        ]
      },
      filterOptions: ['5000', '10000', '20000', '50000'] // 价格筛选选项
    }
  },
  computed: {
    // 当前标签页下的所有商品
    currentGoods() {
      return this.allGoods[this.currentTab] || [];
    },
    
    // 经过筛选后的商品列表
    displayedGoods() {
      let filtered = this.currentGoods;
      
      // 应用价格筛选
      if (this.priceFilter) {
        filtered = filtered.filter(item => item.price <= this.priceFilter);
      }
      
      // 应用搜索筛选
      if (this.searchKey) {
        filtered = filtered.filter(item => 
          item.price.toString().includes(this.searchKey) || 
          (item.name && item.name.includes(this.searchKey))
        );
      }
      
      // 确保至少显示4个商品位置（不足则补空项）
      if (filtered.length < 4) {
        const emptyItems = Array(4 - filtered.length).fill({});
        filtered = [...filtered, ...emptyItems];
      }
      
      return filtered;
    }
  },
  methods: {
    // 切换标签页（出售中/拍卖中）
    switchTab(tab) {
      this.currentTab = tab;
      this.clearFilter(); // 切换标签时清除筛选条件
    },
    
    // 打开价格筛选菜单
    openFilter() {
      uni.showActionSheet({
        itemList: this.filterOptions,
        success: (res) => {
          this.priceFilter = Number(this.filterOptions[res.tapIndex]);
        }
      });
    },
    
    // 清除价格筛选条件
    clearFilter() {
      this.priceFilter = null;
    },
    
    // 搜索商品
    filterGoods() {
      // 搜索逻辑已在 computed 中实现
    },
    
    // 跳转到商品详情页（可扩展）
    navigateToDetail(item) {
      if (item.id) {
        uni.navigateTo({ url: `/pages/goods/detail?id=${item.id}` });
      }
    }
  },
  onLoad() {
    // 实际项目中应从数据库加载商品数据
    // this.loadGoodsFromDB();
  },
  async loadGoodsFromDB() {
    // 示例：从云数据库加载商品
    const db = uniCloud.database();
    const res = await db.collection('goods').get();
    
    // 按状态分组
    this.allGoods = {
      sell: res.result.data.filter(item => item.status === 'sell'),
      auction: res.result.data.filter(item => item.status === 'auction')
    };
  }
}
</script>

<style scoped>
/* 页面容器 */
.store-page {
  padding: 16px;
  background: #fff;
}

/* 顶部栏 */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.store-tag {
  background: #cfa993; /* 浅棕色背景 */
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  border: none;
}
.search-box {
  display: flex;
  align-items: center;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  padding: 4px 10px;
  width: 60%;
}
.search-icon {
  width: 20px;
  height: 20px;
  margin-left: 8px;
}

/* 功能按钮 */
.func-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.func-btn {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid #ccc;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 80px;
}
.sell-btn {
  background: #ffdddd; /* 出售中粉色背景 */
  color: #ff3333;
  border: none;
}
.auction-btn, .filter-btn, .manage-btn {
  background: #f5f5f5; /* 灰色背景 */
  color: #666;
}
.filter-icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
.func-btn.active {
  opacity: 0.8;
  font-weight: bold;
}

/* 价格筛选条件显示 */
.filter-condition {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8f8f8;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}
.clear-filter {
  color: #ff3333;
  background: transparent;
  border: none;
  font-size: 14px;
}

/* 商品列表 */
.goods-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.goods-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #eee;
  height: 220px; /* 固定高度 */
}
.goods-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.price-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffcccc; /* 粉色价格条 */
  color: #ff9900;      /* 橙色文字 */
  font-size: 14px;
  padding: 4px 0;
  text-align: center;
  z-index: 10;
}
.status-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: white;
  z-index: 10;
}
.sell-tag {
  background: #ff3333; /* 出售中红色背景 */
}
.auction-tag {
  background: #ff9900; /* 拍卖中橙色背景 */
}
</style>